<template>
	<view class="contract uni-flex-column">
		<CustomNavBar class="navbar" title="人脸认证">
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack"><uni-icons type="left"
						size="20"></uni-icons></view>
			</template>
		</CustomNavBar>
		<view class="box_1 uni-flex-column-center">
			<view class="text_1">人脸验证</view>
			<view class="text_2">仅用于实名认证，零付应用不存储用户的个人</view>
			<view class="face_box">
				<image :src="`${$ImgBaseUrl}face.png`" class="face" />
			</view>
			<view class="text_3">请正对手机，保持光线充足</view>
			<view class="btn">
				<text class="text_4" @click="addContract">开始刷脸拍照</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import CustomNavBar from '@/components/custom-navbar/index.vue';
import { startEid } from '@/mp_ecard_sdk/main'
import {getEToken, pushEToken} from '@/api/user.js'
import { reactive, toRefs, onMounted } from 'vue';
const goBack = () => {
  uni.navigateBack({
    delta: 1
  })
};
const addContract = () => {
  getEToken().then(res => {
    const { eidToken } = res.data;
    console.log('获取token成功:', eidToken);
    startEid({
      data: {
        token:eidToken,
        enableEmbedded: true,
        allowFullScreen: false
      },
      verifyDoneCallback(res) {
        const { token, verifyDone } = res;
        console.log('收到核身完成的res:', res);
        console.log('核身的token是:', token);
        console.log('是否完成核身:', verifyDone);
        pushEToken({faceToken:token}).then(res => {
          console.log('上传token成功:', res);
        })
      },
    });
  })
};

onMounted(() => {
  console.log('KAISHI')
  addContract();
})
</script>

<style scoped lang="scss">
	.contract {
		height: 100vh;
		background: radial-gradient(52% 101% at 16% 6%, #E2EFFF 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);

		.navbar {
			width: 100%;
		}

		.back {
			width: 44rpx;
			height: 44rpx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 50%;
		}
	}

	.box_1 {
		overflow-y: auto;
		padding: 156rpx 24rpx 266rpx;

		.text_1 {
			font-weight: 500;
			font-size: 60rpx;
			color: #0F3581;
			line-height: 84rpx;
		}

		.text_2 {
			font-weight: 400;
			font-size: 24rpx;
			color: #0F3581;
			line-height: 33rpx;
			margin-top: 24rpx;
		}

		.text_3 {
			font-weight: 400;
			font-size: 30rpx;
			color: #999999;
			line-height: 42rpx;
		}

		.face_box {
			margin: 73rpx 0 47rpx;
			padding: 15rpx;
			width: 351rpx;
			height: 351rpx;
			border-radius: 50%;
			border: 6rpx solid #2F80ED;
		}

		.face {
			width: 351rpx;
			height: 351rpx;
			border-radius: 50%;
		}

		.btn {
			width: 86%;
			height: 88rpx;
			background: #2F80ED;
			border-radius: 44rpx;
			text-align: center;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			margin: 99rpx auto 0;
		}
	}
</style>